<template>
  <div ref="print" v-show="isPreview">
    <table style="border-collapse: collapse" width="100%">
      <tbody>
        <div style="height: 60px; text-align: center">
          <p>山东吉利新能源商用车有限公司</p>
          <p>三包索赔扣款通知单</p>
        </div>
        <table class="fs12 tc">
          <tr height="25px">
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 15%">供应商代码</td>
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 35%">
              {{ list.supplierCode }}
            </td>
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 15%">供应商名称</td>
            <td style="font-size: 12px; text-align: center; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 35%">
              {{ list.supplierName }}
            </td>
          </tr>
        </table>
        <table class="fs12 tc" style="margin-top: -1px">
          <tr height="25px">
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 15%">扣款单号</td>
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 35%">
              {{ list.settleNo }}
            </td>
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 10%">扣款月份</td>
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 15%">
              {{ list.settleMonth }}
            </td>
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 10%">结算日期</td>
            <td style="border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; width: 15%">
              {{ list.settleDate }}
            </td>
          </tr>
        </table>
        <table class="bor fs12 tc" style="margin-top: -1px">
          <tr height="25px">
            <td style="width: 5%">序号</td>
            <td style="width: 13%">服务中心代码</td>
            <td style="width: 15%">索赔单号</td>
            <td style="width: 10%">车型</td>
            <td style="width: 9%">工时费</td>
            <td style="width: 9%">材料费</td>
            <td style="width: 9%">管理费</td>
            <td style="width: 9%">外出服务费</td>
            <td style="width: 9%">附加费用</td>
            <td style="width: 12%">追偿费用</td>
          </tr>

          <tr height="25px" v-for="(x, index) in list.childrens" :key="index">
            <td style="width: 5%">
              {{ index + 1 }}
            </td>
            <td style="width: 13%">
              {{ x.dealerCode }}
            </td>
            <td style="width: 15%">
              {{ x.claimNo }}
            </td>
            <td style="width: 10%">
              {{ x.modelName }}
            </td>
            <td style="width: 9%">
              {{ Number(x.labourAmount).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(x.partAmount).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(x.manageAmount).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(x.helpAmount).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(x.addAmount).toFixed(2) }}
            </td>
            <td style="width: 12%">
              {{ Number(x.totalAmount).toFixed(2) }}
            </td>
          </tr>

          <tr height="25px">
            <td colspan="4">合计</td>
            <td style="width: 9%">
              {{ Number(list.labourAmountTotal).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(list.partAmountTotal).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(list.manageAmountTotal).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(list.helpAmountTotal).toFixed(2) }}
            </td>
            <td style="width: 9%">
              {{ Number(list.addAmountTotal).toFixed(2) }}
            </td>
            <td style="width: 12%">
              {{ Number(list.totalAmount).toFixed(2) }}
            </td>
          </tr>

          <tr height="25px">
            <td colspan="2">其他费用</td>
            <td colspan="2">
              {{ Number(list.misjudgeAmount).toFixed(2) }}
            </td>
            <td>总计</td>
            <td colspan="5">
              {{ Number(list.aggregate).toFixed(2) }}
            </td>
          </tr>
          <tr height="25px">
            <td>备注</td>
            <td colspan="9">
              {{ list.remark }}
            </td>
          </tr>
        </table>

        <tr height="25px"></tr>
      </tbody>
    </table>
    <div style="page-break-after: always; height: 0">&nbsp;</div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: 'templateSupplierClaimSettle',
  props: {
    //传值 从上一页
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
    isPreview: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM'),
      list: {},
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.list = this.data.rows;
    this.handle();
    this.$nextTick(function () {
      //必须写
      console.log('this.list 渲染数据 =>', this.list, this.data);
      this.$emit('onPrintTable', this.$refs.print.innerHTML);
    });
    if (this.isPreview) {
      this.fillInToDom();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },
    handle() {
      let dataList = JSON.parse(JSON.stringify(this.data));
      let number = Math.ceil(this.data.length / 30);
      this.number = number;
      for (let i = 1; i <= number; i++) {
        if (number == i) {
          let obj = {};
          obj.arr = dataList.splice(0, dataList.length);
          obj.index = i;
          this.list.push(obj);
        } else {
          let obj = {};
          obj.arr = dataList.splice(0, 30);
          obj.index = i;
          this.list.push(obj);
        }
      }
    },
  },
};
</script>

<style>
</style>
